import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Progress进度条组件
 * @element zss-progress
 */
@customElement('zss-progress')
export class ZssProgress extends LitElement {
  static styles = css`
    :host {
      display: block;
      width: 100%;
    }

    .progress {
      position: relative;
      width: 100%;
    }

    .progress-bar {
      position: relative;
      overflow: hidden;
      border-radius: var(--zss-border-radius-base);
      background-color: var(--zss-fill-color-light);
    }

    .progress-bar-inner {
      height: 100%;
      border-radius: var(--zss-border-radius-base);
      background-color: var(--zss-color-primary);
      transition: width 0.3s ease;
      position: relative;
    }

    .progress-text {
      font-size: var(--zss-font-size-small);
      color: var(--zss-text-color-regular);
      margin-top: 8px;
      text-align: center;
    }

    .progress-text-inside {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--zss-bg-color);
      font-size: 12px;
      line-height: 1;
    }

    /* 线形进度条 */
    .progress-line {
      height: 6px;
    }

    .progress-line .progress-bar-inner {
      height: 100%;
    }

    /* 圆形进度条 */
    .progress-circle {
      display: inline-block;
      position: relative;
      width: 120px;
      height: 120px;
    }

    .progress-circle-track {
      width: 100%;
      height: 100%;
    }

    .progress-circle-path {
      stroke: var(--zss-fill-color-light);
      fill: none;
      stroke-width: 6;
    }

    .progress-circle-inner {
      stroke: var(--zss-color-primary);
      fill: none;
      stroke-width: 6;
      stroke-linecap: round;
      transition: stroke-dasharray 0.3s ease;
    }

    .progress-circle-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: var(--zss-font-size-base);
      color: var(--zss-text-color-regular);
    }

    /* 类型样式 */
    .progress-bar-inner.success {
      background-color: var(--zss-color-success);
    }

    .progress-bar-inner.warning {
      background-color: var(--zss-color-warning);
    }

    .progress-bar-inner.danger {
      background-color: var(--zss-color-danger);
    }

    .progress-bar-inner.info {
      background-color: var(--zss-color-info);
    }

    .progress-circle-inner.success {
      stroke: var(--zss-color-success);
    }

    .progress-circle-inner.warning {
      stroke: var(--zss-color-warning);
    }

    .progress-circle-inner.danger {
      stroke: var(--zss-color-danger);
    }

    .progress-circle-inner.info {
      stroke: var(--zss-color-info);
    }

    /* 条纹动画 */
    .progress-bar-inner.striped {
      background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
      background-size: 20px 20px;
    }

    .progress-bar-inner.animated {
      animation: progress-stripes 1s linear infinite;
    }

    @keyframes progress-stripes {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 20px 0;
      }
    }

    /* 尺寸 */
    .progress-line.small {
      height: 4px;
    }

    .progress-line.large {
      height: 8px;
    }

    .progress-circle.small {
      width: 80px;
      height: 80px;
    }

    .progress-circle.small .progress-circle-text {
      font-size: var(--zss-font-size-small);
    }

    .progress-circle.large {
      width: 160px;
      height: 160px;
    }

    .progress-circle.large .progress-circle-text {
      font-size: var(--zss-font-size-large);
    }

    /* 自定义颜色 */
    .progress-bar-inner.custom-color {
      background-color: var(--custom-color);
    }

    .progress-circle-inner.custom-color {
      stroke: var(--custom-color);
    }
  `;

  /**
   * 进度值（0-100）
   * @attr percentage
   */
  @property({ type: Number })
  percentage = 0;

  /**
   * 进度条类型
   * @attr type
   */
  @property({ type: String })
  type: 'line' | 'circle' = 'line';

  /**
   * 进度条状态
   * @attr status
   */
  @property({ type: String })
  status: 'success' | 'warning' | 'danger' | 'info' | 'primary' = 'primary';

  /**
   * 是否显示文字
   * @attr show-text
   */
  @property({ type: Boolean })
  showText = true;

  /**
   * 文字是否显示在进度条内
   * @attr text-inside
   */
  @property({ type: Boolean })
  textInside = false;

  /**
   * 是否显示条纹
   * @attr striped
   */
  @property({ type: Boolean })
  striped = false;

  /**
   * 是否显示动画
   * @attr animated
   */
  @property({ type: Boolean })
  animated = false;

  /**
   * 尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 进度条颜色
   * @attr color
   */
  @property({ type: String })
  color = '';

  /**
   * 进度条宽度（仅圆形进度条）
   * @attr stroke-width
   */
  @property({ type: Number })
  strokeWidth = 6;

  /**
   * 圆形进度条直径
   * @attr width
   */
  @property({ type: Number })
  width = 120;

  private getPercentageText(): string {
    return `${this.percentage}%`;
  }

  private getCirclePath(): string {
    const radius = (this.width - this.strokeWidth) / 2;
    const circumference = 2 * Math.PI * radius;
    const strokeDasharray = `${(this.percentage / 100) * circumference} ${circumference}`;
    return strokeDasharray;
  }

  private getCircleViewBox(): string {
    return `0 0 ${this.width} ${this.width}`;
  }

  private getCircleRadius(): number {
    return (this.width - this.strokeWidth) / 2;
  }

  private getCircleCenter(): number {
    return this.width / 2;
  }

  renderLineProgress() {
    const classes = [
      'progress-bar-inner',
      this.status,
      this.striped ? 'striped' : '',
      this.animated ? 'animated' : '',
      this.color ? 'custom-color' : ''
    ].filter(Boolean).join(' ');

    const style = {
      width: `${this.percentage}%`,
      '--custom-color': this.color || ''
    };

    return html`
      <div class="progress-bar progress-line ${this.size}">
        <div 
          class=${classes}
          style=${Object.entries(style)
            .filter(([_, value]) => value)
            .map(([key, value]) => `${key}: ${value}`)
            .join('; ')}
        >
          ${this.showText && this.textInside ? html`
            <div class="progress-text-inside">${this.getPercentageText()}</div>
          ` : ''}
        </div>
      </div>
      ${this.showText && !this.textInside ? html`
        <div class="progress-text">${this.getPercentageText()}</div>
      ` : ''}
    `;
  }

  renderCircleProgress() {
    const classes = [
      'progress-circle-inner',
      this.status,
      this.color ? 'custom-color' : ''
    ].filter(Boolean).join(' ');

    const style = {
      '--custom-color': this.color || ''
    };

    return html`
      <div class="progress-circle ${this.size}">
        <svg 
          class="progress-circle-track" 
          viewBox=${this.getCircleViewBox()}
        >
          <circle 
            cx=${this.getCircleCenter()} 
            cy=${this.getCircleCenter()} 
            r=${this.getCircleRadius()} 
            class="progress-circle-path"
            stroke-width=${this.strokeWidth}
          />
          <circle 
            cx=${this.getCircleCenter()} 
            cy=${this.getCircleCenter()} 
            r=${this.getCircleRadius()} 
            class=${classes}
            style=${Object.entries(style)
              .filter(([_, value]) => value)
              .map(([key, value]) => `${key}: ${value}`)
              .join('; ')}
            stroke-width=${this.strokeWidth}
            stroke-dasharray=${this.getCirclePath()}
            transform="rotate(-90 ${this.getCircleCenter()} ${this.getCircleCenter()})"
          />
        </svg>
        ${this.showText ? html`
          <div class="progress-circle-text">${this.getPercentageText()}</div>
        ` : ''}
      </div>
    `;
  }

  render() {
    return html`
      <div class="progress">
        ${this.type === 'line' ? this.renderLineProgress() : this.renderCircleProgress()}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-progress': ZssProgress;
  }
}